<template>
    <div style="height: 100%">
        <div v-show="active === 'view'" style="height: 100%">
            <viewIndexList @rowClickEditEvent="handleRowClickEdit"/>
        </div>
        <div v-show="active === 'edit'" style="height: 100%">
            <viewIndexEdit @clickReturnEvent="active = 'view'" ref="indexEdit"/>
        </div>
    </div>
</template>

<script>
    import viewIndexList from "./Page1"
    import viewIndexEdit from "./Page2"

    export default {
        name: "IndexConfig",
        data() {
            return {
                active: 'view'
            }
        },
        methods: {
            handleRowClickEdit(row) {
                this.$refs.indexEdit.setCurIndex(row);
                this.active = 'edit';
                this.$nextTick(() => {
                    this.$refs.indexEdit.setCanvasWidth();
                })

            }
        },
        components: {
            viewIndexList,
            viewIndexEdit
        }
    }
</script>

<style scoped>

</style>